<template>
    <div class="recommendation">
        <div class="bg"></div>
        <div class="container">
            <div class="title">投稿推荐</div>
            <div class="search-container" v-if="!showResult">
                <div><Icon type="md-apps" size="18" /> 论文题目</div>
                <Input size="large" placeholder="输入论文题目" v-model="title" />
                <div><Icon type="md-apps" size="18" /> 论文摘要</div>
                <Input size="large" type="textarea" placeholder="输入论文摘要（最多支持五千字）" v-model="abstract" />
                <div><Icon type="md-apps" size="18" /> 关键词</div>
                <Select v-model="keyword_select" multiple  style="width:auto;margin-right:10px" placeholder="未选关键词">
                    <Option v-for="item in keyword_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Input prefix="md-barcode" placeholder="添加关键词" style="width: 140px;margin-right:10px" v-model="keyword" />
                <Button type="primary" style="margin-right:10px;color:#eee;font-size:13px" @click="addKeyword()">添加</Button>
                <span class="keyword-msg">{{msg}}</span>
                <div><Icon type="md-apps" size="18" /> 研究领域</div>
                <Select  multiple style="width:50%;" size="large" placeholder="请选择论文研究领域">
                    <Option v-for="(item,index) in field_list" :value="index" :key="index">{{ item.label }}</Option>
                </Select>
                <div>
                    <Button type="success" style="width:150px;height:40px;color:white;margin-top:10px" @click="loadingJournal()">推荐期刊</Button>
                </div>
            </div>
            
            <div class="result" v-else>
                <!-- 骨架屏 -->
                <el-skeleton animated :loading="loading">
                    <template slot="template">
                        <div v-for="(item,index) in 5" :key="index">
                        <el-skeleton-item variant="text" style="width:100%;height:30px;margin-left:5px;margin-top:10px"/>
                        <el-skeleton-item variant="text" style="width:100%;height:200px;margin-left:5px;margin-top:10px"/>
                        </div>
                    </template>
                </el-skeleton>
                <div v-if="!result_list.length" class="empty animated fadeInUp">
                    <span class="back" @click="back"><Icon type="md-arrow-round-back" /> 返回</span>
                    <img src="../assets/empty.svg" alt="" width="40%">
                    <p>暂无推荐数据，请尝试输入合适的关键词~</p>
                </div>
                <div v-if="!loading&&result_list.length" class="have-list">
                    <h3 style="font-size:20px;color:#4eadca" class="animated fadeInDown"><Icon type="md-checkmark-circle-outline" size="25" /> 共为您推荐{{result_list.length}}种期刊：
                    <Select style="width:120px;font-weight:normal;" v-model="select_way" placeholder="选择排序方式">
                        <Option v-for="(item,index) in orderway" :value="index" :key="index">{{ item }}</Option>
                    </Select>
                    <a><span class="back" @click="back"><Icon type="md-arrow-round-back" /> 返回</span></a>
                    </h3>
                    <div class="result-list animated fadeInRight" v-for="(item,index) in result_list.slice((page-1)*5,page*5)" :key="index">
                        <div class="readmore"><Button type="info">了解更多</Button></div>
                        <div class="star"><Icon type="md-star-outline" size="15" /> 收藏</div>
                        <h2><Icon type="md-list-box" size="22" /> {{item[0]}} 
                            <span style="display:inline-block">
                                <Button>{{item[3]}}</Button>
                            </span>
                        </h2>
                        <p><span class="paper-field">{{item[4]}}</span>{{item[5]}}</p>
                        <div class="result-b">
                            <div><img :src="item[8]" alt="" width="100px" height="140px"></div>
                            <div class="b-r">
                                <div class="r-t">
                                    <p style="color:#888;font-size:14px">匹配精确度</p>
                                    <p><Rate disabled :value="parseFloat(item[1]*10)" />{{(item[1]*10).toFixed(2)}}</p>
                                </div>
                                <div class="r-b">
                                    <!-- <div>
                                        <p>CiteScore</p>
                                        <p><span>11.038</span>   <trend-chart class="chart1" :datasets="[dataset]" :labels="labels" :min="0" padding="5 5 0" :interactive="true" @mouse-move="onMouseMove"></trend-chart></p>
                                    </div> -->
                                    <div>
                                        <p>综合影响因子</p>
                                        <p><span>{{item[7]}}</span>   <trend-chart class="chart1" :datasets="[dataset]" :labels="labels" :min="0" padding="5 5 0" :interactive="true" @mouse-move="onMouseMove"></trend-chart></p>
                                    </div>
                                    <!-- <div>
                                        <p>引用量</p>
                                        <p><span style="font-size:25px;padding-top:10px;color:#999">54</span> </p>
                                    </div> -->
                                    <div>
                                        <p>被引用量</p>
                                        <p><span style="font-size:25px;padding-top:10px;color:#999">{{item[6]}}</span> </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <Page :total="result_list.length" :page-size="5" @on-change="change_page" class="pages" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TrendChart from "vue-trend-chart"
export default {
    components:{
        'trend-chart':TrendChart
    },
    data(){
        return{
            loading:true,
            select_way:0,
            page:1,
            msg:'',
            keyword:'',
            keyword_list:[],
            keyword_select:[],
            title:'',
            abstract:'',
            orderway:["综合","影响因子","被引用量"],
            dataset:{
                data: [10, 50, 20, 100, 40, 60, 80],
                smooth: true,
                fill: true
            },
            labels:{
                xLabels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                yLabels: 5
            },
            showResult:false,
            fieldList:["中等教育","高等教育学","教育学原理","比较教育学","教育史", "学前教育", "教育技术理论", "高等教育", "国际教改战略","课程理论与政策","教学理论与技术","考试与评价制度改革","教师教育改革","教育理论与教育管理", "高等教育", "成人教育","特殊教育"],
            loading2: false,
            options2: [],
            list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'],
            result_list:[]
        }
    },
    watch:{
        select_way(order_index){
            console.log(order_index);
            if(order_index==0){
                this.result_list = this.result_list.sort((a,b)=>{
                    return b[1] - a[1];
                })
            }
            else if(order_index==1){
                this.result_list = this.result_list.sort((a,b)=>{
                    return b[7] - a[7];
                })
            }
             else if(order_index==2){
                this.result_list = this.result_list.sort((a,b)=>{
                    return b[6] - a[6];
                });
            }
        },
    },
    computed:{
        field_list(){
            let arr = [];
            for(let i=0;i<this.fieldList.length;i++){
                arr.push({
                    value:i,
                    label:this.fieldList[i]
                });
            }
            return arr;
        }
    },
    methods:{
        remoteMethod2 (query) {
            if (query !== '') {
                this.loading2 = true;
                setTimeout(() => {
                    this.loading2 = false;
                    const list = this.list.map(item => {
                        return {
                            value: item,
                            label: item
                        };
                    });
                    this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                }, 200);
            } else {
                this.options2 = [];
            }
        },
        onMouseMove(params) {
            if (!params) {
            this.currentInfo = null;
            return;
            }
            this.currentInfo = {
                label: params.data[0].day,
                value: params.data[0].value
            };
        },
        loadingJournal(){
            if(this.keyword_select.length==0){
                this.msg = '请至少输入一项关键字！';
                return;
            }
            document.body.scrollIntoView();
            let that = this;
            that.loading = true;
            that.showResult = true;
            let keywords = '';
            console.log(this.keyword_list,this.keyword_select)
            for(let item of this.keyword_select){
                keywords += this.keyword_list[item].label;
            }
            
            this.axios.get("http://101.35.135.139:5001/index",{
                params:{
                    keywords:keywords,
                    abstract:this.abstract,
                    title:this.title
                }
            }).then(res=>{
                // that.result_list = JSON.parse(res.data);
                let data = res.data.replace("NaN",'""');
                that.result_list = JSON.parse(data);
                let result_arr = [];
                for(let i=0;i<that.result_list['ISSN'].length;i++){
                    let arr = [];
                    for(let key in that.result_list){
                        arr.push(that.result_list[key][i]);
                    }
                    result_arr.push(arr);
                }
                console.log(result_arr)
                that.result_list = result_arr.filter((item)=>{
                    return item[1]>0;
                });
                that.loading = false;
            })
        },
        addKeyword(){
            if(!this.keyword){
                this.msg = '关键词不能为空！';
                return;
            }else{
                if(this.keyword_select.length>=5){
                    this.msg = '关键词数量已达上限！';
                    return;
                }
                let value = this.keyword_list.length==0?0:(this.keyword_list.length);
                this.keyword_list.push({
                    value:value,
                    label:this.keyword
                });
                this.keyword_select.push(value);
                this.keyword = '';
                this.msg = '';
            }
        },
        change_page(currentPage){
            document.body.scrollIntoView();
            this.page = currentPage;
        },
        back(){
            this.showResult = false;
        }
    },
    created(){
        this.$Loading.finish();
    },
    mounted() {
        this.$Notice.config({
            top: 80,
        });
        this.$Notice.info({
            title: '投稿推荐',
            desc: '输入论文的标题和摘要，轻松找到最适合发表的期刊。平台使用智能搜索技术和特定研究领域的词汇来将您的论文与科学期刊相匹配。',
            duration:3,
        });
    },
}
</script>

<style lang="scss" scoped>
.pages{
    text-align: center;
    margin-top: 30px;
}
.keyword-msg{
    font-size: 13px !important;
    color: tomato !important;
    display: inline-block !important;
    vertical-align: middle;
}
/deep/ .active-line {
    stroke: rgba(0, 0, 0, 0.2) !important;
}
/deep/ .chart1{
    width: 100px;
    height: 50px;
  display: flex;
  flex-wrap: wrap;
  .x-labels,.y-labels{
      display: none;
  }
  .stroke {
    stroke-width: 2;
  }
  /deep/ .fill {
    opacity: 0.2;
  }
  /deep/ .active-line {
    stroke: rgba(0, 0, 0, 0.2);
  }
  .point {
    display: none;
  }
  .point.is-active {
    display: block;
  }
  .stroke {
    stroke: #61dafb;
  }
  .fill {
    fill: #61dafb;
  }
  .point {
    fill: #61dafb;
    stroke: #61dafb;
  }
}
.recommendation{
    padding-bottom: 50px;
    background: #eee;
    .bg{
        position: relative;
        height: 220px;
        background: linear-gradient(-150deg, #1c4f48, #28354b);
        z-index: 0;
    }
    .result{
        h3{
            position: relative;
            z-index: 99;
        }
        .empty{
            text-align: center;
            p{
                margin-top: 10px;
                font-weight: bold;
                color: #888;
            }
        }
        .have-list{
            .back{
                float: right;
                font-size: 13px;
                margin-top: -10px;
                background: var(--single-color);
                padding: 10px 20px;
                color: white;
                margin-right: -30px;
                font-weight: bold;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                transition: all 0.2s ease;
            }
            .back:hover{
                opacity: .8;
            }
        }
        .empty{
            .back{
                float: right;
                font-size: 13px;
                margin-top: -10px;
                background: var(--single-color);
                padding: 10px 20px;
                color: white;
                margin-right: -30px;
                font-weight: bold;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                transition: all 0.2s ease;
                cursor: pointer;
            }
            .back:hover{
                opacity: .8;
            }
        }
        .result-list{
            border: 1px solid #ececec;
            padding: 30px;
            background: rgb(252,252,252);
            margin-top: 20px;
            .readmore{
                position: absolute;
                right: 30px;
                bottom: 30px;
            }
            .star{
                position: absolute;
                right: 30px;
                top: 30px;
                // color: #2d8cf0;
                font-size: 13px;
                cursor: pointer;
            }
            .paper-field{
                font-size: 12px;
                padding: 4px;
                height: 25px;
                background: orange;
                color: white;
                font-weight: bold;
                margin-right: 10px;
            }
            /deep/ .ivu-rate{
                font-size: 17px;
            }
            >*{
                margin-top: 5px;
            }
            >h2{
                font-size: 21px;
                margin-top: 0px !important;
                margin-bottom: 10px;
                button{
                    margin-right: 10px;
                    font-size: 12px;
                    padding: 5px 10px;
                }
            }
            >p{
                font-size: 15px;
                color: #888;
            }
        }
        .result-b{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 20px;
            .b-r{
                .r-t{
                    margin-left: 40px;
                }
                .r-b{
                    display: flex;
                    flex-direction: row;
                    margin-top: 15px;
                    >div{
                        margin-left: 40px;
                        p{
                            color: #888;
                            font-size: 14px;
                        }
                    }
                    >div>p:nth-of-type(2){
                        display: flex;
                        flex-direction: row;
                        align-items: flex-end;
                    }
                }
            }
        }
    }
    .container{
        position: relative;
        width: 70%;
        padding: 0px 30px;
        background: white;
        margin-left: 15%;
        text-align: left;
        padding-bottom: 40px;
        margin-top: -50px;
        box-shadow: 1px 1.732px 60px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        >div>*{
            margin-bottom: 10px;
            font-size: 16px;
            color: #666;
        }
        /deep/ input,/deep/ textarea{
            font-size: 14px;
        }
        /deep/ textarea{
            height: 100px;
        }
        /deep/ .ivu-select-placeholder{
            font-size: 14px !important;
        }
        .title{
            background: var(--single-color);
            box-shadow: 0 0 10px 0px #1b1b1b96;
            position: relative;
            color: white;
            font-weight: normal;
            font-size: 16px;
            width: 150px;
            margin: auto;
            padding: 12px 20px;
            border-radius: 5px;
            font-weight: bold;
            transform: translateY(-35px);
            text-align: center;
            border-bottom: 5px solid #eee;
        }
    }
}

@media (max-width:1060px) {
    .recommendation{
        .container{
            width: 92%;
            margin-left: 4%;
            padding: 20px;
            .title{
                margin-top: -20px;
            }
        }
        .result{
            .result-list{
                .result-b{
                    flex-direction: column;
                    align-items: flex-start;
                    .r-b{
                        flex-direction: column;
                        margin-top: 0;
                        >div{
                            margin-left: 0;
                            margin-top: 10px;
                        }
                    }
                    .r-t{
                        margin-left: 0;
                    }
                }
            }
            .have-list,.empty   {
                .back{
                    margin-right: -20px !important;
                }
        }
        }
    }
}
</style>